<template>
    <Cell :class="className" :icon="icon" :to="to" :url="url" :replace="replace" :border="border" :isLink="isLink" @click="click">
        <template v-if="techIcon" slot="icon">
            <TechIcon class="tech-cell-icon" :name="techIcon" />
        </template>
        <template v-if="miniIcon" slot="icon">
            <MiniIcon class="tech-cell-icon" :name="miniIcon" :mode="mode" :theme="miniIconTheme || theme" :styleMode="styleMode"  />
        </template>
        <template slot="title">
            <div :class="titleClass">{{title}} <TechIcon v-if="tipIcon" class="tip-icon" :name="tipIcon" /></div>
            <div class="van-cell__label">{{label}}</div>
        </template>
        <span :class="valueClass">
            <slot name="value">
                {{value}}
                <TechIcon v-if="valueIcon" :name="valueIcon" :isStop="true" @click="valueAction"/>
            </slot>
        </span>
        <template slot="right-icon">
            <MiniIcon v-if="isLink" :size="16" name="right" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
            <slot name="icon"></slot>
        </template>
        <slot></slot>
    </Cell>
</template>

<script>
import { Cell } from 'vant';
import TechIcon from './TechIcon';
import MiniIcon from './MiniIcon';
import ModeMixin from '@common/mixin';
export default {
    name: 'TechCell',
    mixins: [ModeMixin],
    components: {
        Cell,
        TechIcon,
        MiniIcon,
    },
    props: {
        title: String,
        icon: {
            type: String,
            default: '',
        },
        valueIcon: {
            type: String,
            default: '',
        },
        value: {
            type: [String, Number],
            default: '',
        },
        label: String,
        type: {
            type: String,
            default: 'normal', // normal,red,gray,switch,red-block
        },
        titleBold: {
            type: Boolean,
            default: false,
        },
        isLink: Boolean,
        url: String,
        replace: Boolean,
        border: {
            type: Boolean,
            default: true,
        },
        to: [String, Object],
        techIcon: String,
        miniIcon: String,
        miniIconTheme: String,
        tipIcon: String,
        isHaveBorderBottom: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        titleClass() {
            const { titleBold } = this.$props;
            return `tech-cell-title ${titleBold ? 'title-bold' : ''}`;
        },
        valueClass() {
            const { type } = this.$props;
            let rtn = 'tech-cell-value text-overflow';
            if (type === 'red') {
                rtn += ' value-red';
            }
            if (type === 'gray') {
                rtn += ' value-gray';
            }
            if (type === 'red-block') {
                rtn += ' value-red-block';
            }
            return rtn;
        },
        className() {
            const { isHaveBorderBottom } = this.$props;
            return `tech-cell ${isHaveBorderBottom ? 'border-bottom' : ''}`;
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
        valueAction() {
            this.$emit('valueAction');
        },
    },
};
</script>

<style lang="less">
    .tech-cell {
        &.border-bottom {
            .border-line();
            &::after {
                display: block;
            }
        }
        &::after {
            display: none;
        }
        .flex-vertical-center();
        .van-cell__title {
            flex: 4;
        }
        .tech-cell-icon {
            .m-r(@gap-sm);
            .font-size-md();
        }
        .van-cell__value {
            flex: inherit;
        }
        .tech-cell-title {
            .flex();
            align-items: center;
            &.title-bold {
                font-weight: @font-weight-bold;
            }
            .tip-icon {
                .m-l(@gap-sm);
            }
        }
        .tech-cell-value {
            color: @text-color;
            max-width: 240px;
            display: block;
            align-items: center;
            .tech-icon {
                .m-l(@gap-sm);
            }
            &.value-red {
                color: #FE3B30;
            }
            &.value-gray {
                color: @gray-dark;
            }
            &.value-red-block {
                .linear-right(#FF986D, #FF6767);
                color: @white;
                border-radius: @border-radius / 2;
                .p-h(@gap-sm);
                font-size: @font-size-sm;
            }
        }
        .tech-cell-arrow {
            color: #999;
            font-size: 12px;
            line-height: 24px;
            margin-left: 5px;
        }
    }
</style>
